<template>
  <div class="ad-template-radio">
    <x-form :ref="setItemRef" :model="getProps.params" :rules="rules" label-position="top">
      <n-form-item :label="getProps.params.description" prop="default">
        <template v-if="['ELEMENT_TYPE_ENUM'].includes(getProps.params.element_type)">
          <n-radio-group
            v-if="isEnumeration"
            v-model:value="getProps.params.default"
            :disabled="disabled"
            size="small"
            @update:value="onChangeType"
          >
            <n-radio-button v-for="item in enumeration" :key="item.value" :label="item.value">{{
              item.description
            }}</n-radio-button>
          </n-radio-group>
          <div v-else style="color: red">请先选择关联项</div>
        </template>
        <template v-if="['ELEMENT_TYPE_BOOLEAN'].includes(getProps.params.element_type)">
          <n-switch v-model:value="getProps.params.default" checked-value="是否启用" @update:value="onSwitch" />
        </template>
      </n-form-item>
    </x-form>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router'
  import XForm from '@/components/x-form/index.vue'
  import { NFormItem, NRadioGroup, NRadioButton, NSwitch } from 'naive-ui'
  import { computed, onMounted, reactive, ref, watch } from 'vue'
  import { useStore } from '@/store'

  const route = useRoute()
  const store = useStore()
  const emit = defineEmits(['change', 'switch'])
  const props = defineProps({
    params: {
      type: Object,
      default: () => ({})
    },
    // 默认值
    defaultValue: {
      type: String,
      default: ''
    },
    // 过滤
    filter: {
      type: [Array, String],
      default: () => []
    },
    // 保留
    retain: {
      type: [Array, String],
      default: () => []
    },
    isSwitch: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  })
  const getProps = reactive(props)
  const creative = computed(() => {
    return store.state.intelligent.data.creative
  })
  const enumeration = computed(() => {
    if (getProps.params.retain && getProps.params.retain.length) {
      if (typeof getProps.params.retain === 'object') {
        return getProps.params.retain
      } else {
        return getProps.params.enum_property.enumeration.filter((item) => item.value === getProps.params.retain)
      }
    }
    if (getProps.params.filter && getProps.params.filter.length) {
      // 过滤掉不需要的值
      return getProps.params.enum_property.enumeration.filter((item) => item.value !== getProps.params.filter)
    }
    return getProps.params.enum_property ? getProps.params.enum_property.enumeration : []
  })
  const isEnumeration = computed(() => {
    return enumeration.value && enumeration.value.length
  })
  const rules = ref({ default: [] })
  const itemRefs = {}
  const setItemRef = (el: any) => {
    if (el) {
      const key = getProps.params.name
      itemRefs[key] = el
    }
  }
  watch(
    () => getProps.params.defaultValue,
    (val) => {
      getProps.params.defaultValue = val
    }
  )
  onMounted(() => {
    initRules()
  })

  function initRules() {
    // 必填、可选
    if (getProps.params.required) {
      rules.value.default.push({
        type: 'any',
        required: getProps.params.required,
        message: `请选择${getProps.params.description}`,
        trigger: ['blur', 'change']
      })
    }
  }
  // 校验
  function validate() {
    return new Promise((resolve, reject) => {
      itemRefs[getProps.params.name].validate((errors) => {
        if (!errors) {
          resolve({
            [getProps.params.name]: getProps.params.default
          })
        } else {
          resolve(false)
        }
      })
    })
  }
  // 切换落地页类型
  function onChangeType(val) {
    getProps.params.default = val
    emit('change', val, 'change')
  }
  // 切换开头
  function onSwitch(val) {
    if (isEnumeration.value) {
      if (val) {
        getProps.params.default = enumeration.value[0].value
      } else {
        getProps.params.default = false
      }
    }
    emit('switch', val, 'switch')
  }

  defineExpose({
    validate
  })
</script>

<style scoped lang="scss"></style>
